<template>
  <div class="app-container">
    <el-row>
      <el-col :span="16">
        <div class="bg-purple">
          <el-card shadow="never" class="box-card">
            <div slot="header" class="clearfix">
              <span class="span_text">工程立项</span>
              <el-button class="card-r-btn" type="text">提交审核</el-button>
              <el-button class="card-r-btn" type="text">保存</el-button>
            </div>
            <el-form :model="editForm" :rules="editFormRules" ref="editForm" label-width="130px">
              <el-row>
                <el-col :span="12">
                  <el-form-item label="项目名称:" prop="projectName" class="form-item">
                    <el-input v-model="editForm.projectName" class="filter-item" placeholder="项目名称"/>
                  </el-form-item>
                  <el-form-item label="规模分类:" prop="scale" class="form-item">
                    <el-input v-model="editForm.scale" class="filter-item" placeholder="规模分类"/>
                  </el-form-item>
                  <el-form-item label="采购类型:" prop="orgID" class="form-item">
                    <el-select placeholder="请选择" style="width:100%;" clearable v-model="editForm.orgID"
                               class="form-select" :popper-append-to-body="false" popper-class="select-popper">
                      <el-option :value="0" label="货物类"></el-option>
                      <el-option :value="1" label="服务类"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="是否需要招标:" prop="needBidding" class="form-item">
                    <el-select placeholder="请选择" style="width:100%;" clearable v-model="editForm.needBidding"
                               class="form-select" :popper-append-to-body="false" popper-class="select-popper">
                      <el-option :value="0" label="不需要招标"></el-option>
                      <el-option :value="1" label="需要招标"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="采购机构:" prop="orgName" class="form-item">
                    <el-input v-model="editForm.orgName" class="filter-item" placeholder="采购机构"/>
                  </el-form-item>
                  <el-form-item label="采购方式:" prop="situation	" class="form-item">
                    <el-input v-model="editForm.situation" class="filter-item" placeholder="采购方式"
                              type="textarea" :autosize="{ minRows: 1, maxRows: 4}"/>
                  </el-form-item>
                  <el-form-item label="金额(元):" prop="investment" class="form-item">
                    <el-input v-model="editForm.investment" class="filter-item" placeholder="金额"/>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </el-card>

          <div class="icon_btm">
            <i class="el-icon-bottom"></i>
          </div>
          <el-card shadow="never" class="box-card">
            <div slot="header" class="clearfix">
              <span class="span_text">开始招标</span>
              <el-button class="card-r-btn" type="text">提交审核</el-button>
              <el-button class="card-r-btn" type="text">保存</el-button>
            </div>
            <el-form :model="editForm" :rules="editFormRules" ref="editForm" label-width="130px">
              <el-row>
                <el-col :span="12">
                  <el-form-item label="采购单位:" prop="projectName" class="form-item">
                    <el-input v-model="editForm.projectName" class="filter-item" placeholder="采购单位"/>
                  </el-form-item>
                  <el-form-item label="采购单位负责人:" prop="scale" class="form-item">
                    <el-input v-model="editForm.scale" class="filter-item" placeholder="采购单位负责人"/>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="招标方式:" prop="orgID" class="form-item">
                    <el-input v-model="editForm.orgID" class="filter-item" placeholder="招标方式"/>
                  </el-form-item>
                  <el-form-item label="招标范围:" prop="needBidding" class="form-item">
                    <el-input v-model="editForm.needBidding" class="filter-item" placeholder="采购单位负责人"/>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </el-card>
          <div class="icon_btm">
            <i class="el-icon-bottom"></i>
          </div>

          <el-card shadow="never" class="box-card">
            <div slot="header" class="clearfix">
              <span class="span_text">招标完成</span>
              <el-button class="card-r-btn" type="text">保存</el-button>
            </div>
            <el-form :model="editForm" :rules="editFormRules" ref="editForm" label-width="130px">
              <el-form-item label="招标备注信息:" prop="situation	" class="form-item">
                <el-input v-model="editForm.situation" class="filter-item" placeholder="招标备注信息"
                          type="textarea" :autosize="{ minRows: 1, maxRows: 4}"/>
              </el-form-item>
            </el-form>
          </el-card>

          <div class="icon_btm">
            <i class="el-icon-bottom"></i>
          </div>
          <el-card shadow="never" class="box-card">
            <div slot="header" class="clearfix">
              <span class="span_text">合同签定</span>
              <el-button class="card-r-btn" type="text">保存</el-button>
            </div>
            <el-form :model="editForm" :rules="editFormRules" ref="editForm" label-width="130px">
              <el-row>
                <el-col :span="12">
                  <el-form-item label="中标单位:" prop="projectName" class="form-item">
                    <el-input v-model="editForm.projectName" class="filter-item" placeholder="中标单位"/>
                  </el-form-item>
                  <el-form-item label="中标单位负责人:" prop="scale" class="form-item">
                    <el-input v-model="editForm.scale" class="filter-item" placeholder="中标单位负责人"/>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="合同开始日期:" prop="orgID" class="form-item">
                    <el-input v-model="editForm.orgID" class="filter-item" placeholder="合同开始日期"/>
                  </el-form-item>
                  <el-form-item label="合同结束日期:" prop="needBidding" class="form-item">
                    <el-input v-model="editForm.needBidding" class="filter-item" placeholder="合同结束日期"/>
                  </el-form-item>
                  <el-form-item label="合同签署日期:" prop="needBidding" class="form-item">
                    <el-input v-model="editForm.needBidding" class="filter-item" placeholder="合同签署日期"/>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </el-card>
          <div class="icon_btm">
            <i class="el-icon-bottom"></i>
          </div>

          <el-card shadow="never" class="box-card">
            <div slot="header" class="clearfix">
              <span class="span_text">采购项目付款</span>
              <el-button class="card-r-btn" type="text">提交审核</el-button>
              <el-button class="card-r-btn" type="text">保存</el-button>
            </div>
            <el-form :model="editForm" :rules="editFormRules" ref="editForm" label-width="130px">
              <el-form-item label="付款金额:" prop="projectName" class="form-item">
                <el-input v-model="editForm.projectName" class="filter-item" placeholder="付款金额"/>
              </el-form-item>
              <el-form-item label="付款日期:" prop="projectName" class="form-item">
                <el-input v-model="editForm.projectName" class="filter-item" placeholder="付款日期"/>
              </el-form-item>
              <el-form-item label="备注信息:" prop="situation	" class="form-item">
                <el-input v-model="editForm.situation" class="filter-item" placeholder="备注信息"
                          type="textarea" :autosize="{ minRows: 1, maxRows: 4}"/>
              </el-form-item>
            </el-form>
          </el-card>
          <div class="icon_btm">
            <i class="el-icon-bottom"></i>
          </div>

          <el-card shadow="never" class="box-card">
            <div slot="header" class="clearfix">
              <span class="span_text">归档</span>
              <el-button class="card-r-btn" type="text">提交审核</el-button>
              <el-button class="card-r-btn" type="text">保存</el-button>
            </div>
            <el-form :model="editForm" :rules="editFormRules" ref="editForm" label-width="130px">
              <el-form-item label="归档日期:" prop="projectName" class="form-item">
                <el-input v-model="editForm.projectName" class="filter-item" placeholder="归档日期"/>
              </el-form-item>
              <el-form-item label="归档号:" prop="projectName" class="form-item">
                <el-input v-model="editForm.projectName" class="filter-item" placeholder="归档号"/>
              </el-form-item>
              <el-form-item label="归档说明:" prop="situation	" class="form-item">
                <el-input v-model="editForm.situation" class="filter-item" placeholder="归档说明"
                          type="textarea" :autosize="{ minRows: 1, maxRows: 4}"/>
              </el-form-item>
            </el-form>
          </el-card>


        </div>
      </el-col>
      <!--右侧目录-->
      <el-col :span="8">
        <div class="bg-purple-light">
          <el-card class="box-card">
            <div slot="header" class="icon-clearfix">
              <div>
                <i class="el-icon-document-add"></i>
                <span>添加目录</span>
              </div>
              <div>
                <i class="el-icon-upload"></i>
                <span>上传材料</span>
              </div>
            </div>
            <div class="head-container">
              <el-row>
                <el-col :span="10">
                  <el-tree
                    :data="deptOptions"
                    :props="defaultProps"
                    :expand-on-click-node="false"
                    :filter-node-method="filterNode"
                    ref="tree"
                    default-expand-all
                    highlight-current
                    @node-click="handleNodeClick"
                  />
                </el-col>
                <el-col :span="14">
                  <div class="to-right">
                    <i class="el-icon-tickets"></i>
                    <span class="title">相关资料文件.doc</span>
                    <div class="text-btn">
                      <span>预览</span>
                      <span>下载</span>
                      <span>修改</span>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  export default {
    name: "product",
    data() {
      return{
        editForm: {
          projectName: '',
          scale: '',
          orgID: '',
          orgName: '',
          needBidding: '',
          investment: '',
          situation: '',
          purpose: '',
          content: ''
        },
        editFormRules: {},
        deptOptions: [
          {
            id: 100,
            label: "测试一",
            children: [
              {
                id: 102,
                label: "测试1-1"
              },
              {
                id: 103,
                label: "测试1-2"
              }
            ]
          }
        ],
        defaultProps: {
          children: "children",
          label: "label"
        },
        deptId: ''
      }
    },
    created(){},
    methods: {
      upLoad() {},
      // 筛选节点
      filterNode(value, data) {
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
      },
      // 节点单击事件
      handleNodeClick(data) {
        this.deptId = data.id;
      },
    }
  }
</script>

<style lang="scss" scoped>
  @import '@/styles/style.scss';
</style>
